<template>
  <view class="container">
    <!-- 背景装饰层（底层，不影响交互） -->
    <view class="bg-decorations">
      <view class="decor-circle decor-circle-1"></view>
      <view class="decor-circle decor-circle-2"></view>
      <view class="decor-circle decor-circle-3"></view>
      <view class="decor-line decor-line-1"></view>
      <view class="decor-line decor-line-2"></view>
      <view class="decor-dot-grid"></view>
    </view>
    
    <!-- 顶部装饰 -->
    <view class="top-decoration"></view>
    
    <!-- 主卡片容器（核心内容层，最高层级） -->
    <view class="card-container">
      <!-- 品牌区域 -->
      <view class="brand-section">
        <view class="brand-logo">
          <text class="logo-icon">📱</text>
          <view class="logo-glow"></view> <!-- logo发光效果 -->
        </view>
        <view class="brand-text">
          <text class="brand-name">SmartUI</text>
          <text class="slogan">智能交互 · 极简体验</text>
        </view>
        <!-- 品牌区域分隔装饰 -->
        <view class="brand-divider">
          <view class="divider-line"></view>
          <view class="divider-dot"></view>
          <view class="divider-line"></view>
        </view>
      </view>
      
      <!-- 登录表单 -->
      <view class="login-form">
        <view class="form-title">
          <text>账户登录</text>
          <view class="title-decoration"></view> <!-- 标题装饰 -->
        </view>
        
        <view class="input-wrapper">
          <view class="input-item">
            <text class="input-icon">👤</text>
            <input 
              type="text" 
              v-model="username" 
              placeholder="请输入用户名" 
              class="form-input"
              @focus="onInputFocus('username')"
              @blur="onInputBlur('username')"
            />
            <view class="input-glow"></view> <!-- 输入框光效 -->
          </view>
          
          <view class="input-item">
            <text class="input-icon">🔒</text>
            <input 
              type="password" 
              v-model="password" 
              placeholder="请输入密码" 
              class="form-input"
              @focus="onInputFocus('password')"
              @blur="onInputBlur('password')"
            />
            <view class="input-glow"></view> <!-- 输入框光效 -->
          </view>
        </view>
        
        <view class="form-actions">
          <text class="forgot-password" @click="navToForgot">忘记密码？</text>
          
          <button class="login-button" @click="handleLogin">
            <text class="button-text">登录</text>
            <text class="button-icon">→</text>
            <view class="button-glow"></view> <!-- 按钮发光效果 -->
          </button>
        </view>
      </view>
      
      <!-- 注册引导 -->
      <view class="register-guide">
        <text class="guide-text">还没有账号？</text>
        <button class="register-button" @click="navToRegister" plain>
          <text>立即注册</text>
          <view class="register-glow"></view> <!-- 注册按钮光效 -->
        </button>
      </view>
      
      <!-- 卡片底部装饰条 -->
      <view class="card-footer-decoration">
        <view class="footer-glow"></view>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="bottom-decoration"></view>
    
    <!-- 角落装饰元素（表层装饰，不遮挡内容） -->
    <view class="corner-decoration corner-top-left"></view>
    <view class="corner-decoration corner-top-right"></view>
    <view class="corner-decoration corner-bottom-left"></view>
    <view class="corner-decoration corner-bottom-right"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      focusedInput: ''
    };
  },
  methods: {
    onInputFocus(field) {
      this.focusedInput = field;
    },
    onInputBlur(field) {
      if (this.focusedInput === field) {
        this.focusedInput = '';
      }
    },
    handleLogin() {
      if (!this.username || !this.password) {
        uni.showToast({ title: '请输入用户名和密码', icon: 'none' });
        return;
      }
      
      // 模拟登录请求
      uni.showLoading({ title: '登录中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '登录成功', icon: 'success' });
        setTimeout(() => {
          uni.switchTab({ url: '/pages/tabBar/component/component' });
        }, 1500);
      }, 1000);
    },
    navToRegister() {
      uni.navigateTo({
        url: '/pages/index/auth/register'
      });
    },
    navToForgot() {
      uni.showToast({ title: '忘记密码功能待实现', icon: 'none' });
    }
  }
};
</script>

<style scoped>
/* 全局容器：控制整体布局和层级基准 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

/* 核心优化1：背景装饰层 - 底层、低透明度、不影响交互 */
.bg-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* 最低层级，确保被所有内容覆盖 */
  pointer-events: none; /* 禁止事件穿透，不影响按钮、输入框交互 */
}

/* 圆形装饰：降低透明度，增大模糊度，避免突兀 */
.decor-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(66, 153, 225, 0.05), rgba(159, 122, 234, 0.05));
  filter: blur(80rpx); /* 增大模糊，让边缘更柔和 */
  animation: float 12s ease-in-out infinite; /* 减慢动画速度，更自然 */
  opacity: 0.7; /* 降低透明度，避免抢戏 */
}

.decor-circle-1 {
  width: 600rpx;
  height: 600rpx;
  top: -200rpx;
  right: -200rpx;
  animation-delay: 0s;
}

.decor-circle-2 {
  width: 450rpx;
  height: 450rpx;
  bottom: -150rpx;
  left: -150rpx;
  animation-delay: 3s;
}

.decor-circle-3 {
  width: 300rpx;
  height: 300rpx;
  top: 50%;
  left: 10%;
  transform: translateY(-50%);
  animation-delay: 6s;
}

/* 线条装饰：更淡的颜色，避免刺眼 */
.decor-line {
  position: absolute;
  height: 2rpx;
  background: linear-gradient(90deg, rgba(66, 153, 225, 0), rgba(66, 153, 225, 0.1), rgba(66, 153, 225, 0));
  animation: pulse 8s ease-in-out infinite; /* 减慢脉冲速度 */
}

.decor-line-1 {
  width: 80%;
  top: 25%;
  left: 10%;
}

.decor-line-2 {
  width: 60%;
  bottom: 30%;
  right: 10%;
  animation-delay: 2s;
}

/* 点阵装饰：极低透明度，作为背景纹理 */
.decor-dot-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(66, 153, 225, 0.03) 1rpx, transparent 1rpx);
  background-size: 40rpx 40rpx;
  opacity: 0.5; /* 降低透明度，避免干扰阅读 */
}

/* 角落装饰：淡色边框，仅作为点缀 */
.corner-decoration {
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  border: 2rpx solid rgba(66, 153, 225, 0.08); /* 更淡的颜色 */
  z-index: 1; /* 高于背景，低于主卡片 */
}

.corner-top-left {
  top: 20rpx;
  left: 20rpx;
  border-right: none;
  border-bottom: none;
  border-radius: 8rpx 0 0 0;
}

.corner-top-right {
  top: 20rpx;
  right: 20rpx;
  border-left: none;
  border-bottom: none;
  border-radius: 0 8rpx 0 0;
}

.corner-bottom-left {
  bottom: 20rpx;
  left: 20rpx;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 8rpx;
}

.corner-bottom-right {
  bottom: 20rpx;
  right: 20rpx;
  border-left: none;
  border-top: none;
  border-radius: 0 0 8rpx 0;
}

/* 顶部/底部装饰：降低透明度，与背景融合 */
.top-decoration {
  position: absolute;
  top: 0;
  right: 0;
  width: 400rpx;
  height: 400rpx;
  background: linear-gradient(135deg, rgba(66, 153, 225, 0.03), rgba(66, 153, 225, 0));
  border-radius: 0 0 0 50%;
  z-index: 0;
}

.bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 350rpx;
  height: 350rpx;
  background: linear-gradient(45deg, rgba(156, 39, 176, 0.03), rgba(156, 39, 176, 0));
  border-radius: 0 50% 0 0;
  z-index: 0;
}

/* 核心优化2：主卡片 - 增加背景模糊，与背景自然过渡 */
.card-container {
  width: 100%;
  max-width: 650rpx;
  background: rgba(255, 255, 255, 0.92); /* 半透明背景，与底层装饰呼应 */
  backdrop-filter: blur(10rpx); /* 背景模糊，让卡片融入背景 */
  border-radius: 24rpx;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.05); /* 更淡的阴影，避免厚重感 */
  padding: 60rpx 40rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 2; /* 最高层级，确保内容不被装饰遮挡 */
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* 卡片底部装饰条：与主色调一致，作为卡片收尾 */
.card-footer-decoration {
  width: 100%;
  height: 4rpx;
  position: absolute;
  bottom: 0;
  left: 0;
}

.footer-glow {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(66, 153, 225, 0), rgba(66, 153, 225, 0.2), rgba(66, 153, 225, 0));
  animation: glow 6s ease-in-out infinite;
}

/* 品牌区域：装饰与内容紧密结合 */
.brand-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50rpx;
  width: 100%;
}

.brand-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4299e1, #9f7aea);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25rpx;
  box-shadow: 0 6rpx 20rpx rgba(66, 153, 225, 0.15); /* 淡阴影，不突兀 */
  position: relative;
}

/* logo发光效果：低透明度，仅作为点缀 */
.logo-glow {
  position: absolute;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #4299e1, #9f7aea);
  filter: blur(25rpx);
  opacity: 0.2; /* 降低发光强度 */
  animation: glow 4s ease-in-out infinite;
}

.logo-icon {
  font-size: 60rpx;
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.brand-text {
  text-align: center;
}

.brand-name {
  font-size: 48rpx;
  font-weight: 700;
  color: #2d3748;
  letter-spacing: 1rpx;
}

.slogan {
  font-size: 24rpx;
  color: #718096;
  margin-top: 8rpx;
  display: block;
}

/* 品牌区域分隔装饰：与卡片风格统一 */
.brand-divider {
  display: flex;
  align-items: center;
  width: 60%;
  margin-top: 25rpx;
}

.divider-line {
  flex: 1;
  height: 1rpx;
  background-color: #f0f2f5; /* 淡色线条，不干扰内容 */
}

.divider-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: #4299e1;
  margin: 0 15rpx;
}

/* 登录表单：装饰元素与表单功能结合 */
.login-form {
  width: 100%;
  margin-bottom: 40rpx;
}

.form-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 40rpx;
  padding-left: 10rpx;
  border-left: 6rpx solid #4299e1;
  position: relative;
  display: flex;
  align-items: center;
}

/* 标题装饰：小巧精致，不抢标题风头 */
.title-decoration {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 60rpx;
  height: 2rpx;
  background: linear-gradient(90deg, #4299e1, rgba(66, 153, 225, 0));
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

.input-item {
  display: flex;
  align-items: center;
  border: 2rpx solid #e8f4f8; /* 淡色边框，与背景融合 */
  border-radius: 12rpx;
  padding: 0 25rpx;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8); /* 输入框背景半透明，呼应卡片 */
}

/* 输入框光效：聚焦时才显示，增强交互反馈 */
.input-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(66, 153, 225, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.input-item:focus-within {
  border-color: #4299e1;
  box-shadow: 0 0 0 4rpx rgba(66, 153, 225, 0.08); /* 淡色阴影，不刺眼 */
}

.input-item:focus-within .input-glow {
  opacity: 1;
}

.input-icon {
  font-size: 32rpx;
  color: #718096;
  margin-right: 20rpx;
  width: 36rpx;
  text-align: center;
}

.form-input {
  flex: 1;
  height: 96rpx;
  font-size: 30rpx;
  color: #2d3748;
  border: none;
  outline: none;
  box-sizing: border-box;
  background: transparent; /* 输入框透明，与外层背景融合 */
}

.form-input::placeholder {
  color: #a0aec0;
  font-size: 28rpx;
}

/* 表单操作区：装饰与功能按钮融合 */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-top: 35rpx;
}

.forgot-password {
  font-size: 24rpx;
  color: #4299e1;
  align-self: flex-end;
  cursor: pointer;
  transition: color 0.2s ease;
}

.forgot-password:hover {
  color: #3182ce;
  text-decoration: underline;
}

.login-button {
  width: 100%;
  height: 100rpx;
  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
  color: #ffffff;
  border-radius: 12rpx;
  font-size: 34rpx;
  font-weight: 600;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12rpx;
  box-shadow: 0 6rpx 16rpx rgba(66, 153, 225, 0.15); /* 淡阴影，增强立体感但不突兀 */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 按钮发光效果：低透明度，作为背景点缀 */
.button-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
  animation: buttonFlow 3s ease-in-out infinite;
  opacity: 0.5;
}

.login-button:active {
  transform: translateY(3rpx);
  box-shadow: 0 3rpx 10rpx rgba(66, 153, 225, 0.2);
  background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%);
}

.button-icon {
  font-size: 30rpx;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.button-text {
  position: relative;
  z-index: 1;
}

.login-button:active .button-icon {
  transform: translateX(6rpx);
}

/* 注册引导：装饰与按钮风格统一 */
.register-guide {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: 20rpx;
}

.guide-text {
  font-size: 26rpx;
  color: #718096;
}

.register-button {
  font-size: 28rpx;
  color: #4299e1;
  border-color: #4299e1;
  border-radius: 8rpx;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* 注册按钮光效：hover时显示，增强交互 */
.register-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(66, 153, 225, 0.05), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.register-button:hover {
  background-color: rgba(66, 153, 225, 0.03); /* 淡色背景，与整体风格统一 */
}

.register-button:hover .register-glow {
  opacity: 1;
}

.register-button:active {
  color: #3182ce;
  border-color: #3182ce;
}

/* 动画：减慢速度，让装饰更自然 */
@keyframes float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20rpx, 20rpx) scale(1.05);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.3;
  }
}

@keyframes glow {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes buttonFlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 响应式适配：小屏幕下简化装饰 */
@media (max-width: 375px) {
  .decor-circle-1 {
    width: 400rpx;
    height: 400rpx;
  }
  .decor-circle-2 {
    width: 300rpx;
    height: 300rpx;
  }
  .decor-circle-3 {
    display: none; /* 小屏幕隐藏部分装饰，避免拥挤 */
  }
  .corner-decoration {
    width: 60rpx;
    height: 60rpx;
  }
}
</style>